import { SyncOutlined } from '@ant-design/icons';
import { Popover } from 'antd';
import PlateImg from './PlateImg';

export default (props: { plateNumber?: string; plateImageUrl?: string }) => {
  const { plateNumber, plateImageUrl } = props;
  if (!plateNumber) {
    return <PlateImg />;
  }
  if (plateImageUrl) {
    return (
      <Popover
        title={plateNumber}
        content={
          <img alt={plateNumber} style={{ maxHeight: 300, maxWidth: 500 }} src={plateImageUrl} />
        }
      >
        <img alt={plateNumber} style={{ width: '80px', height: '30px' }} src={plateImageUrl} />
      </Popover>
    );
  }

  if (plateNumber === '未知车牌') {
    return <PlateImg borderColor="red" plateText="未知车牌" />;
  }

  return (
    <span>
      加载中
      <SyncOutlined spin style={{ marginLeft: 10 }} />
    </span>
  );
};
